<template>
  <div id="carouselbox">
    <el-carousel :interval="3000" height="215px" autoplay indicator-position="none" ref="carousel">
      <el-carousel-item v-for="(image, index) in images" :key="index">
        <img
          :src="image"
          alt="carousel image"
          style="width: 100%; height: 100%; object-fit: cover;"
        />
      </el-carousel-item>
    </el-carousel>
    <div class="custom-indicators">
      <span
        v-for="(image, index) in images"
        :key="index"
        :class="{ active: currentIndex === index }"
        @click="currentIndex = index"
      ></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AutoCarousel',
  data() {
    return {
      images: [
        require('@/assets/iotimg/icon-1.jpg'),
        require('@/assets/iotimg/icon-2.png'),
        require('@/assets/iotimg/icon-3.png'),
        require('@/assets/iotimg/icon-4.png'),
        require('@/assets/iotimg/icon-5.png'),
        require('@/assets/iotimg/icon-6.png')
      ],
      currentIndex: 0
    }
  },
  watch: {
    currentIndex(newIndex) {
      this.$refs.carousel.setActiveItem(newIndex);
    }
  },
  mounted() {
    this.$refs.carousel.$on('change', (current, prev) => {
      this.currentIndex = current;
    });
  }
}
</script>

<style scoped>
#carouselbox {
  width: 100%;
  height: 100%;
  position: relative;
}

.el-carousel__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.custom-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 99999;
}

.custom-indicators span {
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}

.custom-indicators span.active {
  background-color: #fff;
}
</style>